<template>
	<view class="card-container">
		<view class="info-card">
			<view class="report-title">{{ reportDetail.reportTypeName }}</view>
			<view class="divider-line"></view>
			<view class="info-item">
				<view class="info-label">就诊人</view>
				<view class="info-value">{{ reportDetail.patName }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">开方医生</view>
				<view class="info-value">{{ reportDetail.billDoctorName }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">开方科室</view>
				<view class="info-value">{{ reportDetail.billDeptName }}</view>
			</view>
			<view class="info-item" v-if="reportDetail.sampleSamplDate">
				<view class="info-label">采样时间</view>
				<view class="info-value">{{ reportDetail.sampleSamplDate }}</view>
			</view>

			<view class="info-item" v-if="reportDetail.technicianName">
				<view class="info-label">检验者</view>
				<view class="info-value">{{ reportDetail.technicianName }}</view>
			</view>
			<view class="info-item" v-if="reportDetail.sampleReceDate">
				<view class="info-label">收样时间</view>
				<view class="info-value">{{ reportDetail.sampleReceDate }}</view>
			</view>

			<view class="info-item" v-if="reportDetail.trialDoctorName">
				<view class="info-label">审核者</view>
				<view class="info-value">{{ reportDetail.trialDoctorName }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">报告时间</view>
				<view class="info-value">{{ reportDetail.reportTime }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			reportDetail: {
				type: Object,
				default: () => {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 18rpx 24rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(65, 207, 230, 0.08);
	}

	.report-title {
		text-align: center;
		font-size: 36rpx;
		color: #222;
		margin-bottom: 18rpx;
		letter-spacing: 2rpx;
	}

	.divider-line {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 18rpx 0 18rpx 0;
		width: 100%;
	}

	.info-list {
		display: grid;
		grid-template-columns: 1fr 1.3fr;
		gap: 16rpx;
		font-size: 26rpx;
		color: #333;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin: 5px 0;
	}

	.info-label {
		color: #888;
		width: 80px;
		text-align: justify;
		text-align-last: justify;
		margin: 0 10px 0 0;
	}

	.info-value {
		color: #666;
		flex: 1;
	}

	.section-card {
		border-radius: 16rpx;
		background: #fff;
		padding: 0 0 12rpx 0;
		box-shadow: 2rpx 4rpx 12rpx rgba(65, 207, 230, 0.08);
	}

	.table-header {
		display: flex;
		background: #e0f3ff;
		border-radius: 16rpx 16rpx 0 0;
		color: #666;
		font-size: 28rpx;
		padding: 30rpx 10rpx;
	}

	.th {
		text-align: center;

		&.project {
			flex: 2;
			text-align: left;
			padding-left: 20rpx;
		}

		&:not(.project) {
			flex: 1;
		}
	}

	.table-row {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		font-size: 28rpx;
		color: #666;
		padding: 18rpx 0;
		margin: 14rpx 0;

		&:last-child {
			border-bottom: none;
		}
	}

	.td {
		text-align: center;

		&.project {
			flex: 2;
			text-align: left;
			padding-left: 20rpx;
		}

		&:not(.project) {
			flex: 1;
		}
	}
</style>